//一、 根据数据渲染分类条 
// console.log(goodData);

function renderNavigator(path) {
    console.log(path);
    // 先把分类条里的内容清空掉；
    var ele = document.querySelector(".conPoint");
    ele.innerHTML = "";
    // 根据path 数据生成对应的dom结构
    path.forEach(function (item) {
        var aEle = document.createElement("a");
        aEle.innerHTML = item.title;
        if (typeof item.url !== "undefined") {
            aEle.href = item.url;
        }
        ele.appendChild(aEle);
    })
}
renderNavigator(goodData.path);


// 二 、渲染 产品的详细内容 
function renderProductDetail(goodsDetail) {
    var priceAreaEle = document.querySelector(".priceArea");
    priceAreaEle.innerHTML = `<h3 class="title">${goodsDetail.title}</h3>
    <p class="con1">${goodsDetail.recommend}</p>
    <div class="price">
        <div class="priceDetail">
            <p>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>
            <p>￥ <span>${goodsDetail.price}</span> 元</p>
        </div>
        <div class="buy">
            <p>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</p>
            <p><span>${goodsDetail.promoteSales.type}</span>${goodsDetail.promoteSales.content}</p>
        </div>
    </div>
    <div class="support">
        <div class="supportDetail">
            <p>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</p>
            <p>${goodsDetail.support}</p>
        </div>
        <div class="address">
            <p>配&nbsp;送&nbsp;至</p>
            <p>${goodsDetail.address}</p>
        </div>
    </div>`;
}


renderProductDetail(goodData.goodsDetail);



//三、 根据数据渲染 型号选择区域 
var typeArr = [];
function renderType(crumbData){
    var  chooseAreaEle = document.querySelector(".chooseArea");
    chooseAreaEle.innerHTML = "";
    crumbData.forEach(function(item,k){
        var dlEle = document.createElement("dl");
        var dtEle = document.createElement("dt");
        dtEle.innerHTML = item.title;
        dlEle.appendChild(dtEle);
        item.data.forEach(function(val,kk){
            
            var ddEle = document.createElement("dd");
            ddEle.innerHTML = val.type;
            if(kk==0){
                typeArr.push(ddEle)
            }
            dlEle.appendChild(ddEle);
        })

        chooseAreaEle.appendChild(dlEle);
       
    })
    console.log(typeArr);  // 存放选中型号元素的数组 ；
    renderChioseType(typeArr);
}

renderType(goodData.goodsDetail.crumbData);


function renderChioseType(typeArr){
    var chooseInsertEle = document.querySelector(".chooseInsert");
    chooseInsertEle.innerHTML = "";
    typeArr.forEach(function(item){
            var markEle = document.createElement("mark");
            markEle.innerHTML = `${item.innerHTML} <a>X</a>`;
            chooseInsertEle.appendChild(markEle);
    })
}



// 作业 ： 1.知识点    2. 贪吃蛇 （自己写，扩展功能）  3. 终极原型链 4.项目 （写过的需要写，没写过的尝试写） 